<template>
  <div class="shoppingBags">
    <div class="van-nav-bar">
      <div class="van-nav-bar-title">购物袋</div>
      <div class="van-nav-bar-right"
           @click="edit ">编辑
        <van-icon color="#fff"
                  name="edit" />
      </div>
    </div>

    <div v-if="isLogin">
      <div class="max-box">

        <div class="max"
             v-for="item in shopbagData"
             :key="item.sid">
          <van-swipe-cell>

            <div class="shoppingBags-max">
              <div class="shoppingBags-box">
                <van-checkbox v-model="item.checked"
                              checked-color="#0C34BA"
                              @change="selectOne"></van-checkbox>
              </div>

              <div class="shoppingBags-max-In">
                <div class="shoppingBags-img"
                     @click="viewProDetail(item.pid)">
                  <img class="auto-img"
                       :src="item.small_img"
                       alt="">
                </div>

                <div class="shoppingBags-content">
                  <div class="shoppingBags-title"
                       @click="viewProDetail(item.pid)">
                    <div class="item-title">
                      <div class="title">{{item.name}}</div>
                      <div class="item-entitle">{{item.enname}}</div>
                    </div>

                    <div class="spec-box">{{item.rule}}</div>
                  </div>

                  <div class="shoppingBags-Thenumberof">
                    <div class="Thenumberof">&yen;{{item.price}}</div>

                    <van-stepper v-model="item.count"
                                 theme="round"
                                 button-size="22"
                                 disable-input
                                 @change="ModifyThe(item.sid,item.count)" />
                  </div>
                </div>
              </div>

            </div>

            <template #right>
              <van-button square
                          text="删除"
                          color="#e4393c"
                          @click="DeleteGoodsShopbag([item.sid])" />
            </template>
          </van-swipe-cell>
        </div>

      </div>
      <div v-if="shopbagData.length > 0">
        <van-submit-bar :price="totalPrice"
                        button-text="提交订单"
                        v-show="!isEdit"
                        @submit="SubmitOrders">

          <van-checkbox v-model="isAllSelect"
                        checked-color="#0C34BA"
                        @change="allSelect">全选</van-checkbox>
        </van-submit-bar>

        <van-submit-bar button-text="删除选择"
                        v-show="isEdit"
                        @submit="DeleteGoods">
          <van-checkbox v-model="isAllSelect"
                        checked-color="#0C34BA">全选</van-checkbox>
        </van-submit-bar>
      </div>
    </div>

    <div v-else>
      <van-empty image="error"
                 description="请先登录">
        <van-button round
                    type="danger"
                    class="bottom-button"
                    color="#0C34BA"
                    @click="goLogin">去登录</van-button>
      </van-empty>
    </div>

    <div v-if="isLogin && shopbagData.length == 0">
      <van-empty description="购物袋没有商品！" />
    </div>
  </div>
</template>

<script>
export default {
  name: "ShoppingBags",
  data () {
    return {
      // 是否处于编辑状态
      isEdit: false,
      text: '编辑',

      // 商品数量
      count: 1,

      // 全选
      isAllSelect: false,

      // 购物袋数据
      shopbagData: [],

      // 登录状态
      isLogin: true,


    }
  },

  created () {
    this.getShopbagProduct();
  },

  computed: {
    totalPrice () {
      let totalPrice = 0;
      this.shopbagData.forEach(ele => {
        if (ele.checked) {
          totalPrice += ele.price * ele.count
        }
      })
      return totalPrice * 100
    }
  },

  methods: {

    // 跳转商品详情
    viewProDetail (pid) {
      this.$router.push({ name: 'GoodsDetails', params: { pid } });
    },

    //去登录
    goLogin () {
      this.$router.push({ name: 'Login' });

    },

    // 编辑商品
    edit () {
      this.isEdit = !this.isEdit;

      this.text = this.isEdit ? '完成' : '编辑';
    },

    //全选
    allSelect () {

      this.shopbagData.forEach(ele => {
        ele.checked = this.isAllSelect;
      })
    },

    // 单选
    selectOne () {

      for (let i = 0; i < this.shopbagData.length; i++) {
        if (!this.shopbagData[i].checked) {
          this.isAllSelect = false;
          return;
        }
      }

      this.isAllSelect = true;
    },



    //获取商品数据 
    getShopbagProduct () {
      this.axios({
        method: 'get',
        url: '/findAllShopcart',
      }).then(result => {
        if (result.data.code == 700) {
          this.isLogin = false;
          this.text = '';
          return;
        }

        if (result.data.code == 5000) {
          result.data.result.forEach(ele => {
            ele.checked = false;
          })
          this.shopbagData = result.data.result;
          if (this.shopbagData.length == 0) {
            this.text = '';
          }
        }
      })
    },

    // 修改商品数量
    ModifyThe (sid, count) {
      this.axios({
        method: 'post',
        url: '/modifyShopcartCount',
        data: {
          sid,
          count
        }
      }).then(result => {

        if (result.data.code == 700) {
          this.isLogin = false;
          this.text = '';
          return;
        }
      })
    },

    // 删除商品
    DeleteGoodsShopbag (sids) {
      this.axios({
        method: 'post',
        url: '/deleteShopcart',

        data: {
          sids: JSON.stringify(sids)
        }

      }).then(result => {

        if (result.data.code == 7000) {
          sids.forEach(ele => {
            for (let i = this.shopbagData.length - 1; i >= 0; i--) {
              if (ele == this.shopbagData[i].sid) {
                this.shopbagData.splice(i, 1);
                break;
              }
            }


          })

          this.selectOne();

          if (this.shopbagData.length == 0) {
            this.text = ''
          }


        }
      })
    },


    // 删除选择商品
    DeleteGoods () {
      let sids = []

      this.shopbagData.forEach(ele => {
        if (ele.checked) {
          sids.push(ele.sid)
        }
      })

      this.DeleteGoodsShopbag(sids)
    },

    // 提交订单
    SubmitOrders () {
      let sids = []
      this.shopbagData.forEach(ele => {
        if (ele.checked) {
          sids.push(ele.sid)
        }
      })

      if (sids.length == 0) {
        this.$toast('请选择下单商品')
        return
      }

      this.$router.push({ name: 'Order', query: { sids: sids.join('-') } })
    }
  }
}
</script>

<style lang="scss" scoped>
.shoppingBags {
  padding-top: 60px;
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0c34ba;
    color: #fff;
    .van-nav-bar-title {
      font-size: 16px;
    }
    .van-nav-bar-right {
      position: absolute;
      right: 10px;
      font-size: 16px;
    }
  }
  .bottom-button {
    padding: 10px 30px;
  }
  .van-submit-bar {
    bottom: 50px;
  }
  .van-submit-bar__button--danger {
    margin-left: auto;
  }

  .max-box {
    padding: 10px 10px 110px;
    height: 100%;
    .max {
      overflow: hidden;

      .shoppingBags-max {
        margin-top: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        border-radius: 10px;
        background-color: #fff;
        .shoppingBags-box {
          width: 20px;
          height: 20px;
        }
        .shoppingBags-max-In {
          display: flex;
          align-items: center;
          .shoppingBags-img {
            margin-left: 10px;
            width: 80px;
            height: 100%;
          }
          .shoppingBags-content {
            margin-left: 10px;
            height: 100%;
            display: flex;
            flex-direction: column;
            width: calc(100% - 140px);
            .item-title {
              height: 60px;
              .title {
                font-size: 14px;
                width: 90px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .item-entitle {
                font-size: 10px;
                color: #a4a4a4;
                width: 90px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .spec-box {
              margin-left: 20px;
              width: 140px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .shoppingBags-title {
              display: flex;
            }
            .shoppingBags-Thenumberof {
              // margin-top: 40px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .Thenumberof {
                color: #0c34ba;
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }

  .van-button {
    height: 100%;
  }
}
</style>